<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main {
            margin: 20px;
            background-color: rgb(228, 255, 192);
        }
    </style>
</head>

<body>
<!-- 为 ECharts 准备一个宽为 600px，高为 400px 的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script>
    const chartDom = document.getElementById("main");
    // 初始化实例对象 echarts.init(dom) 容器;
    const myChart = echarts.init(chartDom);
    const data = [];
    for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
    }

    option = {
        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 2 // only the largest 3 bars will be displayed
        },
        series: [
            {
                realtimeSort: true,
                name: 'X',
                type: 'bar',
                data: data,
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };

    function update() {
        const data = option.series[0].data;
        for (let i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
                data[i] += Math.round(Math.random() * 2000);
            } else {
                data[i] += Math.round(Math.random() * 200);
            }
        }
        myChart.setOption(option);
    }

    setInterval(function () {
        update();
    }, 500);
    // 将配置项设置给 echarts 实例对象。
    myChart.setOption(option);
    console.log(option);
</script>

</html>